import React, { useState, useEffect } from "react";
import { Table } from "antd";
import { getRowSpanCount2 } from "../utils/func";
import "../assets/css/detail.css";

function Detail() {
  const [count, setCount] = useState(0);
  const renderContent = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    if (index === data.length - 1) {
      obj.props.colSpan = 0;
      obj.props.rowSpan = 0;
    }
    return obj;
  };

  // 粗抛槽
  const data1 = [
    {
      id: 1,
      categroy1: "粗抛槽",
      categroy2: "初配",
      title: "温度",
      unit: "℃",
      range: "30~100",
    },
    {
      id: 2,
      categroy1: "粗抛槽",
      categroy2: "初配",
      title: "时间",
      unit: "s",
      range: "31~100",
    },
    {
      id: 3,
      categroy1: "粗抛槽",
      categroy2: "初配",
      title: "KOH/NaOH",
      unit: "L",
      range: "32~100",
    },
    {
      id: 4,
      categroy1: "粗抛槽",
      categroy2: "补液",
      title: "H2O",
      unit: "L",
      range: "33~100",
    },
    {
      id: 5,
      categroy1: "粗抛槽",
      categroy2: "补液",
      title: "KOH/NaOH",
      unit: "L",
      range: "34~100",
    },
  ];
  // 预清洗槽
  const data2 = [
    {
      id: 6,
      categroy1: "预清洗槽",
      categroy2: "初配",
      title: "温度",
      unit: "℃",
      range: "30~100",
    },
    {
      id: 7,
      categroy1: "预清洗槽",
      categroy2: "初配",
      title: "时间",
      unit: "s",
      range: "31~100",
    },
    {
      id: 8,
      categroy1: "预清洗槽",
      categroy2: "初配",
      title: "KOH/NaOH",
      unit: "L",
      range: "32~100",
    },
    {
      id: 9,
      categroy1: "预清洗槽",
      categroy2: "初配",
      title: "H2O2",
      unit: "L",
      range: "33~100",
    },
    {
      id: 10,
      categroy1: "预清洗槽",
      categroy2: "补液",
      title: "KOH/NaOH",
      unit: "L",
      range: "34~100",
    },
    {
      id: 11,
      categroy1: "预清洗槽",
      categroy2: "补液",
      title: "H2O",
      unit: "L",
      range: "33~100",
    },
    {
      id: 12,
      categroy1: "预清洗槽",
      categroy2: "补液",
      title: "H2O2",
      unit: "L",
      range: "34~100",
    },
  ];
  // 制绒槽
  const data3 = [
    {
      id: 13,
      categroy1: "制绒槽",
      categroy2: "初配",
      title: "温度",
      unit: "℃",
      range: "30~100",
    },
    {
      id: 14,
      categroy1: "制绒槽",
      categroy2: "初配",
      title: "时间",
      unit: "s",
      range: "31~100",
    },
    {
      id: 15,
      categroy1: "制绒槽",
      categroy2: "初配",
      title: "KOH/NaOH",
      unit: "L",
      range: "32~100",
    },
    {
      id: 16,
      categroy1: "制绒槽",
      categroy2: "初配",
      title: "添加剂种类",
      unit: "L",
      range: "33~100",
    },
    {
      id: 17,
      categroy1: "制绒槽",
      categroy2: "初配",
      title: "添加剂",
      unit: "L",
      range: "33~100",
    },
    {
      id: 18,
      categroy1: "制绒槽",
      categroy2: "补液",
      title: "H2O",
      unit: "L",
      range: "33~100",
    },
    {
      id: 19,
      categroy1: "制绒槽",
      categroy2: "补液",
      title: "H2O2",
      unit: "L",
      range: "34~100",
    },
    {
      id: 20,
      categroy1: "制绒槽",
      categroy2: "补液",
      title: "H2O3",
      unit: "L",
      range: "34~100",
    },
  ];
  // 总计
  const total = {
    id: 199999,
    categroy1: "总计",
    categroy2: "初配",
    title: "温度",
    unit: "℃",
    range: "30~100",
  };
  const data = [...data1, ...data2, ...data3, total];
  data.forEach((item, index) => {
    item.money = (index + 1) * 10;
    item.note = `我是第${index + 1}个`;
  });

  const columns = [
    {
      title: "类别",
      dataIndex: "categroy1",
      key: "categroy1",
      width: 100,
      align: "center",
      colSpan: 3,
      render: (value, row, index) => {
        let newRow = getRowSpanCount2(data, "categroy1", index, value);
        if (row.categroy1 === "总计" && index === data.length - 1) {
          newRow.props.colSpan = count;
          // newRow.props.colSpan = calcTotalColumn();
          let total = data
            .filter((item) => item.categroy1 !== "总计")
            .reduce((prev, cur) => {
              return prev + cur.money;
            }, 0);
          newRow.children = `金额总计：${total} 元`;
        }
        return newRow;
      },
    },
    {
      title: "类别",
      colSpan: 0,
      dataIndex: "categroy2",
      key: "categroy2",
      width: 100,
      align: "center",
      render: (value, row, index) => {
        let newRow = getRowSpanCount2(data, "categroy2", index, value);
        if (row.categroy1 === "总计" && index === data.length - 1) {
          let row_span = renderContent(value, row, index);
          return row_span;
        }
        return newRow;
      },
    },
    {
      title: "类别",
      dataIndex: "title",
      key: "title",
      colSpan: 0,
      width: 100,
      align: "center",
      render: renderContent,
    },
    {
      title: "日期",
      children: [
        {
          title: "单位",
          dataIndex: "unit",
          key: "unit",
          width: 100,
          align: "center",
          render: (value, row, index) => {
            if (row.categroy1 === "总计") {
              let row_span = renderContent(value, row, index);
              return row_span;
            } else {
              if (index === 15) {
                return (
                  <div className="divs">
                    <span className="spans"></span>
                  </div>
                );
              } else {
                return value;
              }
            }
          },
        },
        {
          title: "范围",
          dataIndex: "range",
          key: "range",
          width: 100,
          align: "center",
          render: (value, row, index) => {
            if (row.categroy1 === "总计") {
              let row_span = renderContent(value, row, index);
              return row_span;
            } else {
              if (index === 15) {
                return (
                  <div className="divs">
                    <span className="spans"></span>
                  </div>
                );
              } else {
                return value;
              }
            }
          },
        },
      ],
    },
    {
      title: "金额",
      dataIndex: "money",
      key: "money",
      width: 100,
      align: "center",
      render: renderContent,
    },
    {
      title: "备注",
      dataIndex: "note",
      key: "note",
      width: 100,
      align: "center",
      render: renderContent,
    },
  ];

  // 计算总列数
  const calcTotalColumn = () => {
    if (columns.length > 0) {
      let count = 0;
      columns.map((item) => {
        if (item.children && item.children.length > 0) {
          console.log(item.children);
          count = count + item.children.length;
          // calcTotalColumn(item.children)
        } else {
          count++;
        }
      });
      // console.log("总列数：", count);
      return count;
    } else {
      return 0;
    }
  };

  useEffect(() => {
    // 计算总列数
    let count1 = 0;
    function calleArr(array) {
      for (let item of array) {
        if (item.children) {
          calleArr(item.children); //自己调用自己
        } else {
          count1++;
        }
      }
    }
    calleArr(columns);
    console.log("总列数：", count1);
    setCount(count1)
  }, []);

  return (
    <Table
      style={{ padding: "30px", width: "800px" }}
      columns={columns}
      dataSource={data}
      bordered
      size="small"
      pagination={false}
      rowKey={(row) => row.id}
    />
  );
}

export default Detail;
